<template>
  <!-- 退款 -->
  <el-dialog title="确认退费" :visible="value" width="700px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <el-row class="return-row">
        <el-col class="return-title" :span="24">
            <el-col :span="12">退费项目</el-col>
            <el-col :span="12">退费金额</el-col>
        </el-col>
        <el-col v-for="item in checkItemList" :key="item.sourceId" :span="24">
            <el-col :span="12">{{item.sourceName}}</el-col>
            <el-col :span="12">￥{{item.refundAmount}}</el-col>
        </el-col> 
     </el-row>
     <el-row v-if="tsItemList.length>0" class="return-row">
        <el-col class="return-title" :span="24">
            <el-col :span="12">套餐退费</el-col>
            <el-col :span="12">退费金额</el-col>
        </el-col>
        <el-col v-for="obj in tsItemList" :key="obj.sourceId" :span="24">
            <el-col :span="12">{{obj.sourceName}}</el-col>
            <el-col :span="12">￥{{obj.refundAmount}}</el-col>
        </el-col> 
     </el-row>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left" @submit.native.prevent="onSubmit">
        <el-form-item label="退费原因" prop="remark">
            <el-input v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="退费方式" prop="payWay">
            <el-radio-group v-model="form.payWay">
                <el-radio v-for="(value,key) in returnPayTypeList" :key="key" :label="key">
                  {{value}}
                </el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
      <el-button :loading="btnLoading" @click="onClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import enumArr from "../../_enum/enum";
import Valid from "@/_js/validate.js";
export default {
  props: ["value", "checkItemList","orderId","tsItemList"],
  data() {
    return {
      form: {
        remark: "",
        payWay:'7',
      },
      btnLoading:false,
      rules: {
        remark: [
          { required: true, message: "请输入退费原因", trigger: "blur" }
        ],
        payWay: [{ required: true, message: "请选择退费方式", trigger: "blur" }],
      },
      returnPayTypeList:enumArr.returnPayArr
    };
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      let orderItems=[];
      if(this.checkItemList.length>0){
         this.checkItemList.map(it=>{
           orderItems.push({sourceId:it.id,refundAmount:it.refundAmount});
         })
      }
      if(this.tsItemList.length>0){
        this.tsItemList.map(it=>{
           orderItems.push({sourceId:it.id,refundAmount:it.refundAmount});
         })
      }
      this.$refs["form"].validate((valid)=>{
        if(valid){
          this.$api.refundOrder({orderId:this.orderId,...this.form,orderItems:JSON.stringify(orderItems)}).then(res=>{
              if(res.executed){
                this.$message.success(res.message);
                this.$router.push({ 
                  path: '/page/chargeIndexV2', 
                  query: this.getUrlToken({type: 3})
                });
                this.$emit("value",false);
              }else{
                this.$message.error(res.message);
              }
          })
        }
      })
    },
    onOpen() {
      
    },
    onClose() {
      this.$refs["form"].resetFields();
      this.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.return-row{
  margin: 10px 0;
  .return-title{
    color: #000;
    font-size:15px;
  }
  /deep/.el-col{
    line-height: 35px;
  }
}
</style>
